import 'package:flutter/material.dart';
class DraggableIndex extends StatefulWidget {
  const DraggableIndex({Key? key}) : super(key: key);

  @override
  State<DraggableIndex> createState() => _DraggableIndexState();
}

class _DraggableIndexState extends State<DraggableIndex> {
  int _counter = 0;

  late Offset dragPosition = Offset(MediaQuery.of(context).size.width - 100,
      MediaQuery.of(context).size.height - 100);
  Size? screen_size;

  Color dragTargetBackgroundColor = Colors.transparent;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
  
  @override
  void initState() {
    super.initState();
    screen_size = (context
        .getElementForInheritedWidgetOfExactType<MediaQuery>()
        ?.widget as MediaQuery)
        .data
        .size;
    
  }
  
  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    final screenSizeNew = (context
        .getElementForInheritedWidgetOfExactType<MediaQuery>()
        ?.widget as MediaQuery)
        .data
        .size;
    final dx = screenSizeNew.width - screen_size!.width;
    final dy = screenSizeNew.height - screen_size!.height;
    setState(() {
      dragPosition = dragPosition + Offset(dx, dy);
      screen_size = screenSizeNew;
    });
    
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title:Text('draggable')),
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            const Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Text('DragTarget:',
                    style: TextStyle(fontSize: 16, color: Colors.grey)),
                const SizedBox(
                  width: 10,
                ),
                IntrinsicWidth(
                  child: DragTarget(
                      onWillAccept: (color) {
                        debugPrint('onWillAccept:$color}');
                        setState(() {
                          dragTargetBackgroundColor = (color as Color).withOpacity(0.7);
                        });
                        return true;
                      },
                      onAccept: (Color color) {
                        debugPrint('onAccept:$color}');
                        setState(() {
                          dragTargetBackgroundColor = color;
                        });
                      },
                      onLeave: (color){
                        debugPrint('onLeave:$color}');
                        setState(() {
                          dragTargetBackgroundColor = Colors.transparent;
                        });
                      },
                      builder: (BuildContext context, candidateData, rejectedData) {
                        return Container(
                          width: 200,
                          height: 100,
                          decoration: BoxDecoration(
                              color:dragTargetBackgroundColor,
                              borderRadius: BorderRadius.circular(10),
                              border: Border.all(color: Colors.red)),
                        );
                      }),
                ),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: Stack(
        children: [
          Positioned(
            left: dragPosition.dx,
            top: dragPosition.dy,
            child: Draggable(
              data: Colors.blue,
              onDragEnd: (DraggableDetails details) {
                print('onDragEnd:${details.offset}');
                setState(() {
                  dragPosition = details.offset + const Offset(15, 50);
                });
              },
              feedback: FloatingActionButton(
                onPressed: () {},
                child: const Icon(Icons.drag_handle_outlined),
              ),
              // childWhenDragging: FloatingActionButton(
              //   backgroundColor: Colors.red,
              //   onPressed: _incrementCounter,
              //   child: const Icon(Icons.add),
              // ),
              childWhenDragging: const SizedBox.shrink(),
              child: FloatingActionButton(
                onPressed: _incrementCounter,
                child: const Icon(Icons.add),
              ),
            ),
          ),
        ],
      ),
    );
  }
}
